<template>
	<div class="dialog" :style="'display:'+(isShowDialog ? '' : 'none')">
		<span class="dialog_title" :style="'display:'+(title?'':'none')">{{title}}</span>
		<div :class="'dialog_main animated on '+className">
			<slot name="moremenu"></slot>
			<slot name="share"></slot>
			<slot name="tip"></slot>
			<slot name="alert"></slot>
		</div>
	</div>
</template>
<script>
	export default {
		name: "groups_dialog",
		render: function(){
			return {}
		},
		props:["isShowDialog","title","className"]
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.dialog{
		background-color: rgba(0,0,0,.5);
		position: fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		flex-direction: row;
		-webkit-flex-wrap: nowrap;
		flex-wrap: nowrap;
		justify-content: center;
		-webkit-justify-content: center;
		align-content: center;
		-webkit-align-content: center;
		align-items: center;
		-webkit-align-items: center;
		display: flex;
		display: -webkit-flex;
		display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  
		display: -moz-box; /* Firefox 17- */  
		display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
		display: -moz-flex; /* Firefox 18+ */  
		display: -ms-flexbox; /* IE 10 */  
		z-index: 99999;
		font-size: 20/@base;
		.dialog_title{
			display: block;
			position: absolute;
			top:40/@base;
			left:40/@base;
			color:#fff;
		}
		.dialog_main{
			width:60%;
			background-color: #fff;
			border-radius: 8/@base;
			box-shadow: -1/@base 1/@base 5/@base #666;
			padding:0;
			overflow: hidden;
			&.on{
				display: block;
			}
		}
	}
</style>